<template>
	<view class="p-3 px-3">
		<view v-if="post" class="u-skeleton">
			<view class="h3 font-weight-bold mb-1 text-dark">
				{{ post.title.rendered}}
			</view>
			<view class="flex font-sm text-light-muted mb-4">
				<view class="mr-1">{{post.articleInfor.classify[0].cat_name.toString()}}</view>
				<view class="mr-1">{{post.articleInfor.viewCount}}观看</view>
				<view>{{$dayjs(post.modified).format('YYYY-MM-DD')}}</view>
			</view>
		</view>
	
		<u-parse style="line-height: 1.6;" class="text-body font-md" :html="post.content.rendered"></u-parse>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import {getPostsDetail, updateViewCount} from "@/api/posts.js"
	export default {
		data() {
			return {
				post: null,
				loading: true, // 是否显示骨架屏组件
			}
		},
	    async onLoad(option) {
			const postId = option.id
			await updateViewCount(postId)
	        this.post = await getPostsDetail(postId)
			this.loading = false
	    }
	}
</script>

<style>
</style>
